八云家的记事簿

React Basic - 入门知识

Sue-522022-04-02 15:55:00ReactReact

React Basic - 入门知识

目标：

  1. React 概述
  2. React 体验
  3. 认识 JSX 语法
  4. 脚手架工具介绍：create-react-app / vite-react

1. React 概述

目标：

  1. 什么是 React
  2. React 的生态和背景

1.1 什么是 React

A JavaScript library for building user interfaces

一个用于构建用户界面的 JavaScript 库

01

​ React 是一个开源的 Javascript 库，用于构建 Web 应用中的视图层，也就是 Web应用中的前端用户界面MVC中的V层（View）。

​ React的思想非常独特，性能出众，可以写出重复代码少，逻辑清晰的前端代码。并且可以将用户界面代码HTML+CSS 和 JS 逻辑代码即进行完美的融合。

carbon

​ 除了构建浏览器端的 Web 页面以外，还可以构建移动端的原生 App 应用。

官网地址：https://zh-hans.reactjs.org/

github地址：https://github.com/facebook/react/

官网（新）地址（Beta版）：https://reactjs.bootcss.com/

1.2 React 的生态和背景

​ 它是由 Facebook 的软件工程师在 2012 年创建，于 2013 年 5 月开源，目前由 Facebook 以及个人开发人员和公司组成的社区维护。

​ React 生态圈异常活跃，在构建客户端 web 应用的过程中你遇到的问题几乎都可以在社区中找到答案。

ReduxMobXRecoilFormikReact Table
Next.jsGatsbyReact QuerySWRReact Router
React SpringStyled-ComponentsAnt DesignMaterial UIMSW

2 React 体验

目标：

  1. Browser 端（引入方式）
  2. createElement
  3. render
  4. practice（练习）

2.1 Browser 端（引入方式）

<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
1
2

​ React 可以构建在浏览器中运行的 web 应用，也可以构建在移动端运行的原生应用，React 在构建这两种应用时会有一些通用方法和一些非通用方法，通用方法都被放置在了 react 文件中，非通用方法比如实现 web 应用的方法被放置在了 react-dom 中，实现移动端应用的方法被放置在了 react-native-web 文件中。

  • React：核心库，包括了构建 Web 应用和移动端应用通用方法

  • React-dom：只包含了构建 web 应用的方法

  • React-Native-Web：只包含构建移动端应用的方法

2.2 createElement 创建虚拟 Dom 元素

​ 当引入了 React 核心库文件后，window 对象下会多出一个 React 对象，该对象下面的createElement 方法用于创建元素

createElement

例如：

createElement-react-render

2.3 Render 渲染

​ 当引入了 React-Dom 文件后，Window 对象下会多出 ReactDOM 对象，对象下的 render 方法就是用来渲染元素的。

react-render

container:

container

使用示例：

ReactDOM.render(div, document.getElementById("root"));
1

2.4 practice（练习）

目标：

​ 将指定的 HTML 结构使用 React 提供的方式渲染(createElement方法)

![paratice - html struture](https://raw.githubusercontent.com/Sue-52/PicGo/main/images/paratice - html struture.png)

渲染：

![paratice - react render](https://raw.githubusercontent.com/Sue-52/PicGo/main/images/paratice - react render.png)

3 认识 JSX 语法

目标：

  1. 已知问题
  2. JSX 是什么
  3. JSX 语法规则

3.1 已知问题

​ 由于 React 内部的优化机制所制，其必须使用 createElement 方法进行用户界面的构建，但是对于开发者来说这样增加了编写代码的复杂度和开销。

​ 为了解决以上问题，React 为 createElement 方法创造了替代语法，这种语法和传统的 HTML 语法相似度极高, 这样开发者就可以使用熟悉的语法构建界面了。在应用构建阶段, 再使用 balbel 将这种替代语法转换为 createElement 方法, 这样 React 又可以使用它创建元素了。

原先创建元素：

const button = React.createElement("button", { type: "button" }, "按钮")
1

后续创建元素：

const button = <button type="button">按钮</button>
1

3.2 JSX 是什么

​ JSX 是 JavaScript 编程语言的语法扩充，是由 Facebook 创建的，用于在 React 中构建用户界面。

使用：

const button = <button> button </button>
ReactDOM.render(button, document.getElementById("root"));
1
2

​ 但是这种语法浏览器是无法识别的，所以我们需要使用 Babel 转换，将其转换为 React.createElement 方法的调用，所以说 JSX 本质就是 Javascript。

  • Babel：将语法转换为 React.createElement 方法的调用

<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.17/babel.min.js"></script>
1

3.3 JSX 语法规则

​ JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

1. 跟标记

​ 在使用 JSX 语法创建元素时，元素的最外层需要一个跟标记。

错误用法：

const jsx = (
    <p> p1 </p>
    <p> p2 </p>
    <p> p3 </p>
)
1
2
3
4
5

正确用法：

const jsx = (
	<div>
    	<p> p1 </p>
    	<p> p2 </p>
    	<p> p3 </p>
    </div>
)
1
2
3
4
5
6
7

​ 为了避免因为满足规则而出现的无意义标签，React 提供了占位符标记，占位符标记在渲染后不会产生真实 DOM 对象

使用：

const jsx = (
	<React.Fragment>
    	<p> p1 </p>
    	<p> p2 </p>
    	<p> p3 </p>
	</React.Fragment>
)
1
2
3
4
5
6
7

简写方法：

const jsx = (
	<>
    	<p> p1 </p>
    	<p> p2 </p>
    	<p> p3 </p>
	</>
)
1
2
3
4
5
6
7
2. 单标记需闭合

错误示范：

<input type="text" >
1

正确示范：

<input type="text" />
1
3. 属性命名规则

属性名应该遵循小驼峰命名发

示例：

  1. HTML 写法

    <input maxlength="10" readonly autofoucs />
    1

  2. JSX 写法

    <input maxLength="10" readOnly autoFoucs />
    1
4. className 属性

​ 再给元素添加类名应该使用 className 属性，因为 class 在 Javascript 中是保留关键字。

  1. HTML写法

    <div class="div"> I am a div </div>
    1

  2. JSX 写法

    <div className="div"> I am a div </div>
    1
5. HtmlFor 属性

​ 在 label 标签中 使用 htmlFor 属性，因为 for 在 Javascript 中是保留关键字。

  1. HTML写法

    <label for="demo">This is a test input</label>
    1

  2. JSX 写法

    <label htmlFor="demo">This is a test input</label>
    1
6. JSX 格式美化

​ 在多个 JSX 标签同时使用时避免了不一定会换行，只需在最外层的根元素外套上一组小括号即可使标记格式对其，避免了格式混乱产生的错误。

示例：

const element = (
  <>
    <div>header</div>
    <div>footer</div>
  </>
)
1
2
3
4
5
6
7. 注释

在 JSX 中注释的写法为：{/* */}、//

function App() {
    // 注释
    const data = 0;
    return (
    	<>
       	    {/* 注释 */}
        	<div>div</div>
        </>
    )
}
1
2
3
4
5
6
7
8
9
10
8. 插值语法

在 JSX 中可以使用插值语法将动态数据插入到指定位置。

  1. 插入文本

    const someClass = "some-class"
const someText = "I am interpolating text"
const text_jsx = <p className={someClass}>{someText}</p>
    1
    2
    3

  2. 执行计算

    const x = 10
const y = 20
const paragraph = <p>{x * y}</p>
    1
    2
    3

  3. 渲染函数返回值

    function getValue() {
  return "some value from getValue function"
}
const text = <p>{getValue()}</p>
    1
    2
    3
    4

  4. 插值对象

    const obj = {name: "张三"};
const text = <p>{obj}</p>
const other = <p>{{name: "李四"}}</p>
    1
    2
    3

4 脚手架工具介绍：create-react-app / vite-react

目标：

  1. create-react-app
  2. vite

4.1 create-react-app

​ create-react-app 是 React 官方提供的用于创建 React 应用的脚手架工具。

npm install create-react-app -g
npm init react-app react-demo
1
2

4.2 vite

​ vite 是一种新型的前端构建工具，它能显著改善前端开发体验。

Vite由两个主要部分组成：

  1. dev server：利用浏览器的ESM能力来提供源文件，具有丰富的内置功能并具有高效的HMR
  2. 生产构建：生产环境利用Rollup来构建代码，提供指令用来优化构建过程

​ Vite作为一个基于浏览器原生ESM的构建工具，它省略了开发环境的打包过程，利用浏览器去解析imports，在服务端按需编译返回。同时，在开发环境拥有速度快到惊人的模块热更新，且热更新的速度不会随着模块增多而变慢。因此，使用Vite进行开发，至少会比Webpack快10倍左右。

npm init @vitejs/app 项目名
1

选择 react 选项

image-20220325160955490

image-20220325161010579

即可创建项目。

ON THIS PAGE